<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>報損出庫</span>
        <el-button class="buttonA" type="success" @click="onSubmit">保存出庫单</el-button>
      </div>
      <el-form ref="form" :model="form" label-width="auto">
        <el-row>
          <el-col :span="8">
            <el-form-item label="仓库">
              <el-select
                v-model="form.depotId"
                remote
                reserve-keyword
              >
                <el-option
                  v-for="item in deptoOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="	出庫时间">
              <div class="block">
                <el-date-picker
                  v-model="form.outTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  :value-format="'yyyy-MM-dd HH:mm:ss'"
                />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="	备注">
              <div class="block">
                <el-input v-model="form.remark" style="width: 220px" />
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix">
        <span>出庫商品明細</span>
        <el-button class="buttonB" type="primary" @click="choose">
          添加商品
        </el-button>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        height="400px"
        stripe
      >
        <el-table-column
          prop="nameCn"
          label="产品名"

          width="400px"
        >
          <template slot-scope="scope">
            {{ scope.row.product.nameCn }}
          </template>
        </el-table-column>
        <el-table-column
          prop="quantity"
          label="数量"
        >
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.quantity" size="mini" :min="0" />
          </template>
        </el-table-column>
        <el-table-column
          prop="quantity"
          label="備註"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.remark" size="mini" />
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native.prevent="deleteRow(scope.$index, tableData)"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <choose-product ref="chooseProduct" @childNotify="childNotify" />
  </div>
</template>

<script>
import api from '@/api/wms/depotBillOut'
import depotApi from '@/api/wms/depot'
import chooseProduct from '@/components/product'
import { mapGetters } from 'vuex'
import Vue from 'vue'
import router from '@/router/routers'
import store from '@/store'
import { parseTime } from '@/utils'

const defaultFrom = {
  id: '',
  outTime: '',
  depotId: '',
  depotBillOutItems: [],
  outType: 2
}
export default {
  name: 'CreatDamagedOutBill',
  dicts: ['inBillType'],
  components: { chooseProduct },
  props: {
    model: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      tableData: [],
      deptoOptions: [],
      newArr: [],
      arrId: [],
      list: [],
      loading: false,
      form: Object.assign({}, defaultFrom),
      tempRoute: {},
      purchaseId: ''
    }
  },
  computed: {
    ...mapGetters(['baseApi'])
  },
  mounted() {
    depotApi.page().then(res => {
      console.log(res.data)
      for (let i = 0; i < res.data.rows.length; i++) {
        this.deptoOptions.push({ label: res.data.rows[i].name, value: res.data.rows[i].id })
      }
    })
  },
  created() {
    this.form.outTime = parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
  },
  methods: {
    setTitle(title) {
      Vue.nextTick(() => {
        const routeTitle = Object.assign(Object.assign({}, router.currentRoute), { title })
        store.dispatch('tagsView/updateVisitedView', routeTitle)
        document.title = title
      })
    },
    childNotify(params) {
      console.log(params)
      if (params.length === 0) {
        this.$message.error('请选择商品')
      } else {
        for (const item of params) {
          if (this.arrId.indexOf(item.product.id) === -1) {
            this.arrId.push(item.product.id)
            this.tableData.push({
              ...item,
              quantity: 0,
              remark: ''
            })
          }
        }
        this.$refs.chooseProduct.close()
      }
    },
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    onSubmit() {
      if (this.form.depotId === null) {
        this.$message.error('请填写出庫单')
        return
      }
      this.form.depotBillOutItems = this.tableData
      this.form.outType = 2
      if (this.form.depotBillOutItems.length === 0) {
        this.$message.error('请填写出庫单详情')
        return
      }
      this.purchaseId = this.$route.query.purchaseId
      const addEditData = []
      for (let i = 0; i < this.tableData.length; i++) {
        addEditData.push(
          {
            'productId': this.tableData[i].product.id,
            'quantity': this.tableData[i].quantity,
            'remark': this.tableData[i].remark
          })
      }
      this.form.depotBillOutItems = addEditData
      api.add(this.form).then(res => {
        if (res.code === 0) {
          this.tableData = []
          this.form = {}
          this.$refs.chooseProduct.refresh()
          this.$router.replace('/wms/depotBillOut')
        }
      })
    },
    choose() {
      this.$refs.chooseProduct.open()
    }
  }
}
</script>

<style>
.productInfo span{
  display: block;
  line-height: 16px;
}
.buttonA{
  right: 5%;
  position: absolute;
}
.buttonB{
  right: 5%;
  position: absolute;
}
</style>
